<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>可心的开黑小窝</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        background-color: pink;
      }
      .wrapper {
        width: 580px;
        margin: 10px auto;
        border: 2px solid #f07b7d;
        text-align: center;
      }
      .lucking {
        width: 200px;
        height: 180px;
        border: 1px solid #f07b7d;
        position: relative;
      }
      .lucking img {
        position: absolute;
        left: 0;
        bottom: 0;
      }
      .wrapper ul li {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        margin: 4px;
        border: 2px solid #cc5561;
        border-radius: 5px;
        /* 不设置float:left的原因
            1： 浮动不能让父盒子撑开高度 
            2： display:inline-block 具有行内元素的属性特征，给父盒子加text-align:center 可使其居中
            */
        display: inline-block;
      }
      .wrapper button {
        margin-top: 20px;
        width: 80px;
        height: 40px;
        border: none;
        background-color: #dd5f61;
        border-radius: 5px;
        font-weight: 700;
        outline: none;
        cursor: pointer;
      }
      .wrapper .active {
        background-color: #f1084a;
        font-weight: 700;
      }
    </style>
  </head>
  <body>
    <div class="wrapper" id="_wrapper">
      <ul id="_ul"></ul>
      <button class="start">开始随机</button>
      <button class="stop">结束随机</button>
      <div class="lucking" id="_lucking">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <img src="1.gif" alt="" />
      </div>
    </div>
  </body>
</html>
<script>
  var array = [
    
    "王洁",
    "邓伦",
    "李易峰",
    "杨雨婷",
    "张蓓",
    "王洁",
    "邓伦",
    "李易峰",
    "杨雨婷",
    "张蓓",
	"王洁",
	"邓伦",
	"李易峰",
	"杨雨婷",
	"张蓓",
	"王洁",
	"邓伦",
	"李易峰",
	"杨雨婷",
	"张蓓",
   
  ];
  // 获取元素
  var _wrapper = document.getElementById("_wrapper");
  var ul = document.getElementById("_ul");
  var timer = null;
  init();

  function init() {
    // 动态创建li
    for (var i = 0; i < array.length; i++) {
      var oli = document.createElement("li");
      oli.innerHTML = array[i];
      ul.appendChild(oli);
    }
    // 点击
    click();
  }
  function click() {
    // 获取start按钮
    var start = _wrapper.getElementsByTagName("button")[0];
    var stop = _wrapper.getElementsByTagName("button")[1];
    var lucking = document.getElementById("_lucking");
    // 定时器
    start.addEventListener("click", function () {
      clearInterval(timer);
      timer = setInterval(function () {
        // 获得随机数
        for (var i = 0; i < array.length; i++) {
          var random1 = Math.floor(Math.random() * array.length);
          var random2 = Math.floor(Math.random() * array.length);
          var random3 = Math.floor(Math.random() * array.length);
          var random4 = Math.floor(Math.random() * array.length);
          var random5 = Math.floor(Math.random() * array.length);
          ul.children[i].className = "";
        }
        ul.children[random1].className = "active";
        ul.children[random2].className = "active";
        ul.children[random3].className = "active";
        ul.children[random4].className = "active";
        ul.children[random5].className = "active";
      }, 50);
    });
    stop.addEventListener("click", function () {
      clearInterval(timer);
      // 找到此时的元素
      var active = document.getElementsByClassName("active");
      console.log(active);
      lucking.children[0].innerText = "Top：" + active[0].innerText;
      lucking.children[1].innerText = "Mid：" + active[1].innerText;
      lucking.children[2].innerText = "Jug：" + active[2].innerText;
      lucking.children[3].innerText = "ADC：" + active[3].innerText;
      lucking.children[4].innerText = "Sup：" + active[4].innerText;
    });
  }
</script>
